<template>
	<div class="person-admin">
		<div class="person-admin__header">
			<a-button type="primary" @click="addPerson">新增</a-button>
			<a-select
				v-model="searchAdminType"
				:style="{ width: '200px' }"
				placeholder="选择角色"
				@change="searchAdminTypeChange"
			>
				<a-option v-for="item in roleList" :key="item.key" :value="item.key">{{ item.name }}</a-option>
			</a-select>
		</div>
		<a-table
			class="person-admin-table"
			:columns="personAdminColumns"
			:data="personAdminData"
			:pagination="false"
			:scroll="{ y: '100%' }"
		>
			<template #adminType="{ record }">{{ adminTypeFilter(record) }}</template>
			<template #operation="{ record }">
				<span class="operation__item" @click="editPerson(record)">编辑</span>
				<span v-if="adminInfo?.adminType === 0" class="operation__item" @click="showModel(record.adminUser)">
					删除
				</span>
			</template>
			<template #loginPermission="{ record }">
				<a-switch
					v-model="record.loginPermission"
					:checked-value="1"
					:unchecked-value="0"
					@change="loginPermissionChange(record)"
				/>
			</template>
		</a-table>
		<div class="person-admin__pagination">
			<a-pagination v-model:current="current" :total="total" show-total @change="getPersonAdminList" />
		</div>
		<a-modal
			v-model:visible="modalVisible"
			class="person-admin__modal"
			title-align="start"
			ok-text="删除"
			:ok-button-props="{
				status: 'danger',
			}"
			@ok="handleOk"
			@cancel="handleCancel"
		>
			<template #title> 确认删除 </template>
			确认删除该人员吗？
		</a-modal>
		<person-edit-drawer ref="personEditRef" :title="drawerTitle" @update-person-list="getPersonAdminList" />
	</div>
</template>

<script setup lang="ts">
import { ref, Ref, computed, reactive } from 'vue';
import { errors, user } from '@/api';
import { Message } from '@arco-design/web-vue';
import personEditDrawer from './components/personEditDrawer.vue';
import { ROLE_MAP } from '@/constant/adminMap';
import { useUserStore } from '@/store';
import { toRefs } from 'vue';

const userStore = useUserStore();

const { adminInfo } = toRefs(userStore);

const searchAdminType = ref('all');
const roleList = computed(() => {
	let list: Array<{ name: string; key: number | string }> = Object.keys(ROLE_MAP).map((e) => {
		return {
			name: ROLE_MAP[e],
			key: Number(e),
		};
	});
	list.unshift({
		name: '全部',
		key: 'all',
	});
	return list;
});
const searchAdminTypeChange = () => {
	current.value = 1;
	getPersonAdminList();
};

const personAdminColumns: any = [
	{
		title: '姓名',
		dataIndex: 'adminName',
	},
	{
		title: '手机号',
		dataIndex: 'adminMobile',
	},
	{
		title: '角色',
		slotName: 'adminType',
	},
	{
		title: '登录权限',
		dataIndex: 'loginPermission',
		slotName: 'loginPermission',
	},
	{
		title: '操作',
		slotName: 'operation',
	},
];
const personAdminData = ref([]);

const modalVisible = ref(false);
const handleCancel = () => {
	modalVisible.value = false;
};

const nowUserId = ref<number>();
const showModel = (userId: number | '') => {
	modalVisible.value = true;
	if (userId !== '') {
		nowUserId.value = userId;
	}
};
const handleOk = () => {
	deletePersonAdminList();
};

const personEditRef = ref();

const addPerson = () => {
	drawerTitle.value = '新增人员';
	personEditRef.value && personEditRef.value.show();
};
const editPerson = (info: any) => {
	drawerTitle.value = '编辑人员';
	personEditRef.value && personEditRef.value.edit(info);
};

const drawerTitle: Ref<'新增人员' | '编辑人员'> = ref('新增人员');

const current = ref<number>(1);
const total = ref<number>(0);
const getPersonAdminList = async () => {
	let params: { pageNum: number; pageSize: number; adminType?: number } = {
		pageNum: current.value,
		pageSize: 10,
	};
	if (searchAdminType.value !== 'all') {
		params.adminType = Number(searchAdminType.value);
	}
	const { ok, data } = await user.getPersonAdminList(params);
	if (!ok) {
		return;
	}
	personAdminData.value = data.data.records;
	total.value = data.data.total;
};
getPersonAdminList();

const deletePersonAdminList = async () => {
	if (nowUserId.value !== null && nowUserId.value !== undefined) {
		const { ok, data } = await user.deletePersonAdminList(nowUserId.value);
		if (!ok) {
			return;
		}
		Message.success('删除成功');
		getPersonAdminList();
	}
};

const loginPermissionChange = async (info: { adminUser: number; loginPermission: number }) => {
	try {
		const { adminUser, loginPermission } = info;
		const { data, ok } = await user.updateLoginPermission(adminUser, { loginPermission });
		if (!ok) {
			return;
		}
		Message.success(data.msg);
	} catch (error) {
		errors(error);
	}
};

const adminTypeFilter = (info: { adminType: number }) => {
	const { adminType } = info;
	return ROLE_MAP[adminType];
};
</script>

<style lang="less">
.person-admin {
	height: 100%;
	background: #fff;
	box-sizing: border-box;
	padding: 24px 24px 48px;
	position: relative;

	&__header {
		height: 32px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;
	}

	.operation__item {
		cursor: pointer;
		font-size: 14px;
		color: #386cff;

		& + .operation__item {
			margin-left: 16px;
		}
	}

	.person-admin-table {
		height: calc(100% - 32px - 32px) !important;
		overflow: hidden;
	}

	&__pagination {
		border-top: 1px solid #f1f1f1;
		height: 48px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		box-sizing: border-box;
		padding: 0 24px;
		background-color: #fff;
	}
}

.person-admin__modal {
	.arco-modal-footer {
		border: none;
	}
}
</style>
